import { FormModal, ImgHolder } from 'comps/common';
import { Dropdown, Menu, Icon } from 'antd';
import * as React from 'react';
import UserChangePasswordForm from '../../user-manage/containers/user-change-password-form';
const MenuItem = Menu.Item;

class Header extends React.Component {

  render() {
    const { user, onLogout, onProfile } = this.props;

    const onMenuClick = ({ key }) => {
      switch (key) {
        case 'profile':
          onProfile();
          break;
        case 'changePassword':
          this.refs.changePassword.show();
          break;
        case 'logout':
          onLogout();
          break;
        default:
      }
    };

    let dropdownMenu;

    switch (window._profile_) {
      case 'haier':
        dropdownMenu = (<Menu onClick={onMenuClick}>
          <MenuItem key='profile'>用户信息</MenuItem>
          <MenuItem key='logout'>登出</MenuItem>
        </Menu>);
        break;
      default:
        dropdownMenu = (<Menu onClick={onMenuClick}>
          <MenuItem key='profile'>用户信息</MenuItem>
          <MenuItem key='changePassword'>修改密码</MenuItem>
          <MenuItem key='logout'>登出</MenuItem>
        </Menu>);
    }

    return (
      <div className='console-header'>
        <ul className='right-nav'>
          <li>
            <a><Icon type='message'/>消息</a>
          </li>
          <li>
            <a><Icon type='question-circle-o'/>帮助</a>
          </li>
          <li>
            <Dropdown overlay={dropdownMenu} trigger={['click']}>
              <a>
                <ImgHolder src={user.avatar} className='user-avatar' rect='30x30' random='yes' text={user.email.substring(0, 1)}/>
                <div className='user-info'>
                  <span className='user-nick'>{user.nick}</span>
                  <span className='user-email'>{user.email}</span>
                </div>
                <Icon type='down'/>
              </a>
            </Dropdown>
          </li>
        </ul>
        <FormModal title='修改密码' ref='changePassword' form={UserChangePasswordForm}/>
      </div>
    );
  }
}
export default Header;
